<template>
  <div>
    <c-table-box
      ref="cTableBox"
      hide-func
      checkbox
      :off-set="-20"
      :no-request="noRequest"
      :other-filters="otherFilters"
      :table-config="tableConfig"
      @selection-change="selectionChange"
    >
      <template #btn>
        <c-permission v-if="type==='all'" code="all">
          <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='awaitInspection'" code="awaitInspection">
          <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='awaitArrange'" code="awaitArrange">
          <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='arranged'" code="arranged">
          <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='awaitAudit'" code="awaitAudit">
          <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='awaitRectify'" code="awaitRectify">
          <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='closed'" code="closed">
          <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
        </c-permission>
      </template>

    </c-table-box>
    <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />

  </div>
</template>
<script>
import { otherFiltersItem } from '@/utils'
export default {
  name: 'List',
  components: { },
  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      exportVisible: false,
      typeFilters: [],
      loading: false,
      activeTabIndex: 0,
      activeName: 'all',
      activeRowData: {},
      handlefilters: [],
      showDetail: false,
      tableSelected: [], // 当前所选中表格行数据
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/acceptTask/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        order: 'desc',
        pageSize: 10,
        // sort: 'createTime',
        // 表格字段动态配置
        setting: [

          {
            prop: 'constCode',
            label: '项目号',
            minWidth: '140',
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'acceptName',
            label: '流程名称',
            minWidth: '180'
          },
          {
            prop: 'acceptTask',
            label: '验收任务',
            minWidth: '130'
          },
          {
            prop: 'schedule',
            label: '进度',
            minWidth: '130'
          },
          {
            prop: 'isLate',
            label: '当前节点是否超时',
            minWidth: '150',
            render: function(createElement, rows) {
              if (rows.isLate === 1 || rows.isLate === 0) {
                return (<div>
                  <div class={rows.isLate === 1 ? 'colorSetRed' : ''}>
                    {rows.isLate === 1 ? '是' : '否' }</div>
                </div>
                )
              }
              return ''
            }
          },
          {
            prop: 'lateDay',
            label: '超时时长(天)',
            minWidth: '120'
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: '110'
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: '110'
          },
          {
            prop: 'shopAddress',
            label: '门店地址',
            minWidth: '110'
          },
          {
            prop: 'officeName',
            label: '所属办事处',
            minWidth: '110'
          },
          {
            prop: 'submissionTime',
            label: '提报时间',
            minWidth: '110'
          },
          {
            prop: 'hardFinishType',
            label: '硬装结案类型',
            minWidth: '110',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DECORATION_CLOSED_TYPE'
            }
          },
          {
            prop: 'hardArchiveTime',
            label: '硬装归档时间',
            minWidth: '130'
          },
          {
            prop: 'softFinishType',
            label: '软装结案类型',
            minWidth: '130',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DECORATION_CLOSED_TYPE'
            }
          },
          {
            prop: 'softArchiveTime',
            label: '软装归档时间',
            minWidth: '130'
          },
          {
            prop: 'supervisionName',
            label: '监理',
            minWidth: '110'
          },
          {
            prop: 'councilorName',
            label: '督导',
            minWidth: '130'
          },
          {
            prop: 'commissionerName',
            label: '验收专员',
            minWidth: '110'
          }
        ]
      },
      activeDataId: ''
    }
  },
  computed: {
    otherFilters() {
      return [...this.serachFilters, ...this.typeFilters]
    },
    selectedIds() {
      return this.tableSelected.map(row => {
        return row.id
      })
    },
    exportConfig() {
      return [{
        code: 'export',
        name: '验收任务',
        dataApi: '/slm-admin/api/v1/acceptTask/export',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        headers: { 'Permission-perCode': 'acceptTask' },
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    }
  },
  watch: {
    type: {
      handler(v) {
        this.setOtherFilters(v)
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.refreshTable('')
      }
    }
  },
  activated() {
    if (this.ready && this.refreshTable) {
      this.refreshTable()
    }
  },
  deactivated() {
    this.ready = true
  },
  created() {
    this.getDictByPatchTypeAll()
  },
  methods: {

    selectionChange(v) {
      this.tableSelected = v
    },

    // 导出
    handleExport() {
      this.exportVisible = true
    },
    handleDetail(val) {
      this.$router.push({ name: 'AcceptTaskDetail', query: { id: val.id }})
    },

    // 设置过滤条件
    setOtherFilters(v) {
      switch (v) {
        case 'all':
          this.typeFilters = []
          break
        case 'awaitInspection':
          this.typeFilters = [
            otherFiltersItem('schedule', '待报验审核', '=')
          ]
          break
        case 'awaitArrange':
          this.typeFilters = [
            otherFiltersItem('schedule', '待安排', '=')
          ]
          break
        case 'arranged':
          this.typeFilters = [
            otherFiltersItem('schedule', '已安排待验收', '=')
          ]
          break
        case 'awaitAudit':
          this.typeFilters = [
            otherFiltersItem('schedule', '验收报告待审核', '=')
          ]
          break
        case 'awaitRectify':
          this.typeFilters = [
            otherFiltersItem('schedule', '整改', '=')
          ]
          break
        case 'closed':
          this.typeFilters = [
            otherFiltersItem('schedule', '结案', '=')
          ]
          break
      }
    },
    // 刷新表格
    refreshTable(v = 'onPage') {
      this.$nextTick(() => {
        this.$refs.cTableBox.initTableData(v)
      })
    },

    // 导出成功
    handleExportSuccess() {
      this.$message.success('导出成功！')
    }
  }
}
</script>
